<script type="text/javascript">
    setTimeout(function(){
        jQuery(".chzn-select").chosen();
    },1);
</script>
<div class="breadcrumbwidget">
	<ul class="skins">
        <li><a href="default" class="skin-color default"></a></li>
        <li><a href="orange" class="skin-color orange"></a></li>
        <li>&nbsp;</li>
        <li class="fixed"><a href="" class="skin-layout fixed"></a></li>
        <li class="wide"><a href="" class="skin-layout wide"></a></li>
    </ul><!--skins-->
	<ul class="breadcrumb">
        <li><a href="<?php echo $baseurl?>">Trang chủ</a> <span class="divider">/</span></li>
        <li class="active">Thêm thực đơn</li>
    </ul>
</div><!--breadcrumbwidget-->
<div class="pagetitle">
	<h1>Thêm thực đơn</h1> <span></span>
</div>
<div class="maincontent">
    <?php if(validation_errors()):?>
        <div class="alert alert-error" style="margin: 10px 10px 10px 40px;">
          <button data-dismiss="alert" class="close" type="button">×</button>
          <?php echo validation_errors(); ?>
        </div>
    <?php endif;?>
    <div class="contentinner content-dashboard">    
    <?php $attr = array('class' => 'stdform'); echo form_open_multipart('', $attr)?>
	
	
	<input type="hidden" name="count_slides" id="count_slides" value="1" />
	
    <p style="margin-left: 15.8%;">
    	<label style="margin-left: -11px;">Chọn 1 nhà hàng ( * )</label>
        <span class="field">
            <select name="restaurant_id" class="uniformselect nha_hang">
                <?php echo $optionRestaurant;?>
            </select>
        </span>
    </p>
    <p style="margin-left: 15.8%;">
    	<label>Chọn 1 khu vực ( * )</label>
        <span class="field">
            <select name="zone_id" class="uniformselect khu_vuc">
                <?php echo $optionZone;?>
            </select>
        </span>
    </p>
    <br />
	<p>
	<label></label>
	Kích thước ảnh ( 200x320 ), tối đa 2Mb
	</p>
	<p id="content">
	 <span class="box-rpg">
		<span class="field">
			<img src="" id="show_id_1" style="display: inline-block; vertical-align: middle;width: 69px;height: 69px;border: 1px solid #CCC;background: #CCC;margin-bottom: 5px;" />
			<input type="hidden" name="slides_id_1" id="slides_id_1" value="" />
			<input type="hidden" name="slides_verify_id_1" id="slides_verify_id_1" value="" />
			<input class="check" type="hidden" name="slides_check_id_1" id="slides_check_id_1" value="" />
			<input class="uniform-file" type="file" name="slides_uploads_1" id="upload_id_1" onchange="convertimage('upload_id_1', 'slides_id_1', 'show_id_1', 'slides_check_id_1');" value="" />
			<!--<textarea name="url_slides_id_1" id="content_1" cols="80" rows="5" class="span5 content_" placeholder="Nội dung thực đơn..."></textarea>-->			
			<span style="display: block;margin-top: 10px;">
                <input style="vertical-align: middle; display: inline-block; margin-bottom: 10px;" name="name_slides_id_1" id="name_content_1" class="span5 content_" placeholder="Tên thực đơn..."/>
				<input style="vertical-align: middle; display: inline-block;" name="url_slides_id_1" id="content_1" class="span5 content_" placeholder="Đường link web hiển thị..."/>
				<button style="vertical-align: middle;" class="btn btn-rounded plus_slides" type="button"> <i class="icon-plus"></i></button>
				<a style="display: none;" class="remove_slides" href=""> <i class="iconfa-remove"></i></a>
			</span>
		</span>
	</span>
	</p>
    <p>
        <label></label>
        <button class="btn btn-rounded" type="submit"> <i class="iconfa-ok"></i> &nbsp; Lưu lại</button>
        <button class="btn btn-rounded" type="button" onclick="window.location='<?php echo $baseurl.'manage/menus/index'?>'"> <i class="icon-arrow-right"></i> &nbsp; Hủy bỏ</button>
    </p>
    
    </form>
    </div>
</div>

<script>

function convertimage(id, id_parse, img_show, check_image)
{
    var id = id;
    var id_parse = id_parse;
    var img_show = img_show;
    var check_image = check_image;
    var filesSelected = document.getElementById(id).files;
    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        var fileReader = new FileReader();

        fileReader.onload = function(fileLoadedEvent) 
        {
            $("#"+id_parse).attr('value', fileLoadedEvent.target.result);
            $("#"+check_image).val('1');
            //document.getElementById('cddd').html(fileLoadedEvent.target.result);
            $("#"+img_show).attr('src', fileLoadedEvent.target.result);
        };

        fileReader.readAsDataURL(fileToLoad);
    }
}

$(document).ready(function(){
    var n = parseInt($('#count_slides').attr('value'));
    $(document).on('click', '.plus_slides', function(){
        n = n + 1;
        $('#count_slides').attr('value', n);
        var html = '<span class="box-rpg">\n\
                <span class="field">\n\
                    <img src="" id="show_id_'+n+'" style="display: inline-block; vertical-align: middle;width: 69px;height: 69px;border: 1px solid #CCC;background: #CCC;margin-bottom: 5px;" />\n\
                    <input type="hidden" name="slides_id_'+n+'" id="slides_id_'+n+'" value="" />\n\
                    <input type="hidden" name="slides_verify_'+n+'" id="slides_verify_'+n+'" value="" />\n\
                    <input class="check" type="hidden" name="slides_check_id_'+n+'" id="slides_check_id_'+n+'" value="" />\n\
                    <span class="uploader" id="uniform-img_'+n+'"><input class="uniform-file" type="file" name="slides_uploads_'+n+'" id="upload_id_'+n+'" onchange="convertimage(\'upload_id_'+n+'\', \'slides_id_'+n+'\', \'show_id_'+n+'\', \'slides_check_id_'+n+'\');" value="" size="19" style="opacity: 0;"/><span class="filename">No file selected</span><span class="action">Choose File</span></span>\n\
                    \n\
                    <span style="display: block;margin-top: 10px;">\n\
                        <input style="vertical-align: middle; display: inline-block; margin-bottom: 10px;" name="name_slides_id_'+n+'" id="name_content_1" class="span5 content_" placeholder="Tên thực đơn..."/>\n\
						<input style="vertical-align: middle; display: inline-block;" name="url_slides_id_'+n+'" id="content_1" class="span5 content_" placeholder="Đường link web hiển thị..."/>\n\
						<button style="vertical-align: middle;" style="margin-top: 5px;" class="btn btn-rounded plus_slides" type="button"> <i class="icon-plus"></i></button>\n\
						<a class="remove_slides" href=""> <i class="iconfa-remove"></i></a>\n\
					</span>\n\
                </span>\n\
                </span>';
            $(this).parents('p').append(html);
        return false;
    });
    
    jQuery(document).on('click', '.remove_slides', function(){
        ele = jQuery(this);
        val = jQuery(this).parents('.field').find('input.check').attr('value');
        //alert(val);
        if(val != '')
        {
            jConfirm('Thao tác này sẽ xóa ảnh. Bạn có chắc chắn muốn xóa?', 'Xác nhận', function(r) {
        		if(r == true)
                {           
                    ele.parents('span.box-rpg').fadeOut(function(){
            			jQuery(this).remove();
            		});
                }
            });   
        }else{
            jQuery(this).parents('span.box-rpg').fadeOut(function(){
    			jQuery(this).remove();
    		});
        }
        return false;
    });
    //$('#count_slides').attr('value', n);
	
	
});



// check menus + zone đã tồn tại
	
	$( ".khu_vuc" ).change(function() {
		check_exist();
	});
	$( ".nha_hang" ).change(function() {
		check_exist();
	});
	
	function check_exist(){
		var zone_id = $('.khu_vuc').val();
		var res_id = $('.nha_hang').val();
		if( zone_id != '' && res_id != '' ){
			$.ajax({
				type:"GET",
				url: '<?php echo $baseurl; ?>manage/menus/ajax-check-addmenus',
				data:{   
					zone_id : zone_id,
					res_id : res_id
				},
				success:function(data){
					if( data == 200 ){
						alert('Nhà hàng và khu vực đã tồn tại trong hệ thống, vui lòng chọn lại');
						
						 //$(".khu_vuc option[value='']").attr('selected', 'selected');
						 //$(".nha_hang option[value='']").attr('selected', 'selected');
					}
				}
			});
		}
	}


</script>

<style type="text/css">
	.box-rpg{
		margin-bottom: 25px;
	}
	.box-rpg .plus_slides{
		display: none;
	}
	.box-rpg:last-of-type .plus_slides{
		display: inline-block;
	}
</style>